<template>
  <div class="mainBox">
    <el-page-header @back="()=>{this.$router.go(-1)}" content="我的文件"></el-page-header>
    <el-drawer title="上传" :visible.sync="upload" direction="rtl" size="90%">
      上传文件后请点击“刷新文件”，再在列表中选择文件
      <upload></upload>
    </el-drawer>
    <el-drawer title="文件详情" :visible.sync="fileDrawer" direction="rtl" size="90%">
      <div v-if="getType(selectItem.type)=='photo'">
        <el-button type="danger" size="small" @click="()=>{this.$router.push('../ps')}">在线PS</el-button>
        <br>
        <img :src="selectItem.url" style="min-width: 50%;width: 300px;">
      </div>
      <div v-if="getType(selectItem.type)=='video'">
        <video :src="selectItem.url" style="max-width: 90%;" controls
          poster="https://pic.imgdb.cn/item/6313609a16f2c2beb129b38e.gif"> </video>
      </div>
      <el-descriptions class="margin-top" title="文件信息" :column="1" size="90%">

        <template slot="extra">
          <el-button type="primary" size="small" @click="useFile(selectItem)">选用该文件</el-button>
          <el-button type="danger" size="small" @click="delFile(selectItem)">删除</el-button>
        </template>
        <el-descriptions-item label="文件名">{{selectItem.pruename}}</el-descriptions-item>
        <el-descriptions-item label="上传时间">{{selectItem.uptime}}</el-descriptions-item>
        <el-descriptions-item label="类型">{{selectItem.type}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{selectItem.url}}</el-descriptions-item>
      </el-descriptions>

    </el-drawer>
    <!--    <el-page-header @back="goBack" content="我的文件">
    </el-page-header> -->

    <el-input placeholder="搜索" v-model="filterText">
    </el-input>
    <el-button type="text" @click="upload = true">上传文件</el-button>丨<el-button type="text" @click="reload">刷新文件
    </el-button>
    <el-skeleton :rows="6" animated v-if="data.length===0 && loaded!=true" />
    <div  v-if="data.length===0 && loaded==true">无文件</div>
    <div style="display: flex;flex-wrap: wrap;">
      <div v-for="(item,index) in data" class="fileBox" @click="selectFile(item)" @touchstart="gtouchstart(item)"
        @touchmove="gtouchmove()" @touchend="showDeleteButton(item)">
        <div class="fileTypeImg">
          <el-image style="width: 100px; height: 100px"
            :src="`https://mooc2-ans.chaoxing.com/mooc2-ans/images/coursedata/${getType(item.type)}.png`"
            :fit="'cover'"></el-image>
        </div>
        <span class="fileBoxText">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import fileApi from "../../api/file.js"
  import upload from "../tool/upload.vue"
  import fileType from "../../assets/fileTpye.js"
  export default {
    components: {
      upload
    },
    mixins: [fileType],
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.reload()
      this.fileType = this.$attrs.fileTpye
    },
    methods: {
      useFile(data) {
        this.$emit('pushFile', data.pruename, data.id)
      },
      reload() {
        this.data = []
        fileApi.getMyFile().then((res) => {
          // console.log(res)
          this.loaded=true
          this.data = res.data

        })
      },
      goBack() {
        this.$router.go(-1)
      },
      timeFromat(time) {
        // console.log(time)
        if (!time) return ""
        let date = time.split(" ")[0]
        let tim = time.split(" ")[1]
        date = date.replace(/-/, "月") + "日"
        tim = tim.replaceAll("-", ":")
        return date + tim + "上传"
      },
      delFile(item) {
        fileApi.delFile(item.url, item.id).then((res) => {
          if (res.code != 1) {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            });
            return
          }
          if (res.data.affectedRows) {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            });
            this.fileDrawer = false
            this.reload()
          }
        })
      },
      gtouchstart(item) {
        if (this.IsPC()) {
          this.longPress(item);
          return;
        }
        var self = this;
        this.timeOutEvent = setTimeout(function() {
          self.longPress(item);
        }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
        return false;
      },
      //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
      showDeleteButton(item) {
        clearTimeout(this.timeOutEvent); //清除定时器
        if (this.timeOutEvent != 0) {
          //这里写要执行的内容（如onclick事件）
          console.log("点击但未长按");
          useFile(item)
        }
        return false;
      },
      //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
      gtouchmove() {
        clearTimeout(this.timeOutEvent); //清除定时器
        this.timeOutEvent = 0;
      },
      //真正长按后应该执行的内容
      longPress(val) {
        this.timeOutEvent = 0;
        //执行长按要执行的内容，如弹出菜单
        console.log("长按");
        this.selectItem = val
        console.log(val)
        this.fileDrawer = true
      },
      IsPC() {
        let userAgentInfo = navigator.userAgent;
        let Agents = ["Android", "iPhone",
          "SymbianOS", "Windows Phone",
          "iPad", "iPod"
        ];
        let flag = true;
        for (let v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
          }
        }
        return flag;
      },
      selectFile(item) {
        if (this.IsPC()) {
          this.longPress(item)
        } else {
          this.useFile(item)
        }
      }

    },

    data() {
      return {
        upload: false,
        filterText: '',
        data: [],
        fileType: "",
        imgUrl: "",
        fileDrawer: false,
        selectItem: {
          type: "",
          url: ""
        },
        loaded:false
      };
    }
  };
</script>

<style>
  .mainBox {
    width: 80%;
    margin-left: 10%;
  }

  div.el-tree-node__content,
  .custom-tree-node {
    height: 30px !important;
    display: flex;
    align-items: center;
  }

  .custom-tree-node>span {
    display: flex;
    align-items: center;
  }

  .fileBox {
    width: 100px;
    padding: 4px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
  }

  .fileBox:hover {
    background-color: aliceblue;
  }

  .fileBox .fileBoxText {
    word-wrap: break-word
  }
</style>
